<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>计数器：<output id="result"></output></p>
       <button onclick="startWorker()">Start Worker</button>
       <button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
    var w;
    function startWorker() {
        if(typeof(Worker)!=="undefined"){//判断Worker api 支持否
            if(typeof(w) =="undefined"){//变量必须是未定义过得，重复点击对消息的接收并不会产生影响，即使你手速再快
                w= new Worker("worker_demo.js")//创建worker 括号里面填写url
            }
            //html5提供的postMessage和onMessage这一对方法来在不同的文档页或者不同的工作线程之间进行通信.postMessage是发送消息，onmessage作用是接收消息
            w.onmessage = function (event) {
                //event为对应事件，postMessage发送出来的i值在该对象的data属性中.
                document.getElementById("result").innerHTML = event.data
            };
        }else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers..."
        }
    }
    function stopWorker() {
        w.terminate();//终止接收，断开接收它就自动暂停执行timeCount，停止该JS文件内的线程。然后下次再重新计数时，引入文件i又重置为0.
    }
</script>
</body>
</html>